{% extends "GlpmrAuthentificationBundle::layout.html.twig" %}

{% block body %}
{% include "::menu.html.twig" %}
<div class="row main">
	<div class="container">
		<div class="col s12">
			<div class="card-panel card-table">
				<table class="striped responsive-table tableAdr bordered centered z-depth-2">
					<thead class="bg-bleu-pasteur white-text">
						<tr>
							<th data-field="id" rowspan="2">n&deg;</th>
							<th data-field="type" rowspan="2">P&eacute;riph&eacute;rique</th>
							<th data-field="hostname" rowspan="2">Hostname</th>
							<th data-field="description" rowspan="2">Description</th>
							<th data-field="adresse" rowspan="2">Adresse autorisée</th>
							<th data-field="action" colspan="2">Action</th>
						</tr>
						<tr>
							<th data-field="edit">Modifier</th>
							<th data-field="delete">Delete</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td><i class="mdi-hardware-smartphone small fg-bleu-pasteur tooltipped cursor-pointer" data-tooltip="Téléphone" data-position="left"></i></td>
							<td>Windows Phone Jerome</td>
							<td>
								Mon t&eacute;l&eacute;phone
							</td>
							<td>E8:2A:EA:5A:7B:85</td>
							<td><a class="btn-floating bg-vert-pasteur waves-effect waves-light"><i class="mdi-content-create"></i></a></td>
							<td><a href="#confirmSuppr" class="modal-trigger btn-floating red waves-effect waves-light"><i class="mdi-content-clear"></i></a></td>							
						</tr>
						<tr>
							<td>2</td>
							<td><i class="mdi-hardware-computer small fg-bleu-pasteur tooltipped cursor-pointer" data-tooltip="Ordinateur" data-position="left"></i></td>
							<td>Ultrabook Jerome</td>
							<td>
								Mon PC
							</td>
							<td>E8:2A:EA:5A:7B:85</td>
							<td><a class="btn-floating bg-vert-pasteur waves-effect waves-light"><i class="mdi-content-create"></i></a></td>
							<td><a href="#confirmSuppr" class="modal-trigger btn-floating red waves-effect waves-light"><i class="mdi-content-clear"></i></a></td>			
						</tr>
						<tr>
							<td>3</td>
							<td><i class="mdi-hardware-tablet small fg-bleu-pasteur tooltipped cursor-pointer" data-tooltip="Tablette" data-position="left"></i></td>
							<td>Surface Pro 3</td>
							<td>
								Ma tablette
							</td>
							<td>E8:2A:EA:5A:7B:85</td>
							<td><a class="btn-floating bg-vert-pasteur waves-effect waves-light"><i class="mdi-content-create"></i></a></td>
							<td><a href="#confirmSuppr" class="modal-trigger btn-floating red waves-effect waves-light"><i class="mdi-content-clear"></i></a></td>						
						</tr>
						<tr>
							<td>4</td>
							<td><i class="mdi-hardware-watch small fg-bleu-pasteur tooltipped cursor-pointer" data-tooltip="Montre" data-position="left"></i></td>
							<td>Mywatch</td>
							<td>
								Test de description super longue pour voir comment ça se passe au niveau responsiveness du tableau, et longueur aussi pour voir si ça dépasse pas ou ça fout pas la merde au niveau de la hauteur / largeur des cellules.
							</td>
							<td>E8:2A:EA:5A:7B:85</td>
							<td><a class="btn-floating bg-vert-pasteur waves-effect waves-light"><i class="mdi-content-create"></i></a></td>
							<td><a href="#confirmSuppr" class="modal-trigger btn-floating red waves-effect waves-light"><i class="mdi-content-clear"></i></a></td>						
						</tr>						
						<tr>
							<td>5</td>
							<td><i class="mdi-hardware-tv small fg-bleu-pasteur tooltipped cursor-pointer" data-tooltip="Téléviseur" data-position="left"></i></td>
							<td>Ma TV</td>
							<td>
								Tele	
							</td>
							<td>E8:2A:EA:5A:7B:85</td>
							<td><a class="btn-floating bg-vert-pasteur waves-effect waves-light"><i class="mdi-content-create"></i></a></td>
							<td><a href="#confirmSuppr" class="modal-trigger btn-floating red waves-effect waves-light"><i class="mdi-content-clear"></i></a></td>						
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<!-- Formulaire ajout d'adresse -->
		<div id="formAdresse" class="modal modal-fixed-footer">
			<div class="modal-content">	
				<h5>Ajouter une adresse</h5>
				<div class="col s12">	
					<div class="col s1 correct">
						<i class="mdi-action-perm-device-info small"></i>
					</div>	
					<div class="col s11">
						<select id="materiel">
							<option value="" disabled selected>Choisir un p&eacute;riph&eacute;rique</option>
							<option value="ordinateur">Ordinateur</option>
							<option value="smartphone">T&eacute;l&eacute;phone</option>
							<option value="tablette">Tablette</option>
							<option value="montre">Montre</option>
						</select>
					</div>
					<div class="col s12">
						<div class="input-field">
							<i class="mdi-action-dns prefix"></i>
							<input type="text" id="hostname" class="validate" />
							<label for="hostname">Hostname</label>
						</div>
					</div>
					<div class="col s12">
						<div class="input-field">
							<i class="mdi-hardware-cast prefix"></i>
							<input type="text" id="adresse" class="validate" />
							<label for="adresse">Adresse MAC</label>
						</div>
						<div class="input-field">
							<i class="mdi-editor-mode-edit prefix"></i>
							<input type="text" id="description" class="validate"/>
							<label for="description">Description</label>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer center-align">
				<a href="#" class="waves-effect waves-red btn-flat modal-action modal-close">Fermer</a>
				<button class="btn-flat waves-effect waves-green" type="submit" name="action">Enregistrer</button>
			</div>
		</div>


		<!-- dialogue de confirmation de suppression -->
		<div id="confirmSuppr" class="modal">
			<div class="modal-content">	
				<h5>Suppression</h5>
				<div class="col s12">	
					<p>
					Vous allez supprimer l'adresse s&eacute;lectionn&eacute;e, &ecirc;tes-vous s&ucirc;r ?
					</p>
				</div>
				<div class="modal-footer center-align">
					<a href="#" class="waves-effect waves-red btn-flat modal-action modal-close">Non</a>
					<button class="btn-flat waves-effect waves-green" type="submit" name="action">Oui</button>
				</div>
			</div>
		</div>
	</div>
	{% endblock %}